package com.grechur.wanandroidcompose.widget

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun StaggeredGrid(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {

    Layout(modifier = modifier, content = content) { measurables, constraints ->
        var sumHeight = 0 //整个布局的高度，要根据所有子view高度来计算
        var sumWidth = 0 //布局的宽度
        var lineMaxHeight = 0 //单独一行的高度
        // 不要进一步限制子元素，用给定的约束测量它们测量的子视图列表
        val placeables = measurables.mapIndexed { index, measurable ->
            // 测量每个子元素
            val placeable = measurable.measure(constraints)
            Log.e("zhouzhu", "width:${placeable.width} height:${placeable.height}")
            // 累加行中子元素的宽度, 当宽度大于允许的最大宽度时换行
            sumWidth += placeable.width
            if (sumWidth > constraints.maxWidth) {
                // 如果width大于允许的最大宽度, 就另起一行
                sumWidth = placeable.width
                // 每行最高的子元素累加的高度就是布局高度
                sumHeight += lineMaxHeight
                // 重置行中最大子元素高度
                lineMaxHeight = 0
            }
            // 记录每行最高的那个子元素高度
            lineMaxHeight = lineMaxHeight.coerceAtLeast(placeable.height)
            placeable
        }
        sumHeight += lineMaxHeight
        layout(constraints.maxWidth, sumHeight) {
            // 跟踪放置子元素的 x 坐标
            var xPosition = 0
            // 跟踪放置子元素的 y 坐标
            var yPosition = 0
            // 将子元素放置在父布局中
            placeables.forEachIndexed { index, placeable ->
                // 在屏幕上定位项目
                placeable.placeRelative(x = xPosition, y = yPosition)
                // 记录放置到的 x 坐标
                xPosition += placeable.width
                if (index < placeables.size && xPosition + placeables[index].width > constraints.maxWidth) {
                    //如果当前行的子元素总宽度大于屏幕宽度就另起一行(注意加上将要放置的子元素宽度进行判断)
                    xPosition = 0
                    // 记录放置到的 y 坐标
                    yPosition += placeable.height
                }
            }
        }
    }
}

@Preview
@Composable
fun StaggeredGridPre() {
    val items = listOf<String>(
        "af",
        "vaa",
        "grere",
        "eee",
        "vgdfa",
        "greagre",
        "eee",
        "vgda",
        "grearea",
        "eee",
        "vgdaa",
        "greaga",
        "eee",
        "vfa",
        "greaea",
        "eee",
        "vgdafa",
        "grrea",
        "eee",
        "vgdfa",
        "greagra",
        "eee"
    )

    Column() {
        StaggeredGrid() {
            items.forEach {
                Button(onClick = { }, Modifier.padding(horizontal = 10.dp)) {
                    Text(text = "$it")
                }
            }
        }
    }


}